<template>
    <el-row>
        <div>
            <el-button type="info" @click="pushPermissions">管理员</el-button>
            <el-button type="info">添加管理员</el-button>
        </div>
       <div class="zhanghao clear">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="admin_account">
                    <el-input v-model="ruleForm.admin_account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="admin_pwd">
                    <el-input v-model="ruleForm.admin_pwd"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="admin_name">
                    <el-input v-model="ruleForm.admin_name"></el-input>
                </el-form-item>                     
                <el-form-item label="所属部门" prop="admin_depart">
                    <el-select v-model="ruleForm.admin_depart" placeholder="请选择部门">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="所属角色" prop="role_id">
                    <el-select v-model="ruleForm.role_id" placeholder="请选择角色">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="admin_phone">
                    <el-input v-model="ruleForm.admin_phone"></el-input>
                </el-form-item>
                <el-form-item label="一句话自述" prop="self_description">
                    <el-input type="textarea" v-model="ruleForm.self_description"></el-input>
                </el-form-item>
                 <el-form-item label="头像:" required>
                    <el-upload
                        :data="ruleForm"
                        ref="staffHeadImg"
                        :http-request="uploadImgAndData"
                        class="avatar-uploader"
                        action
                        :show-file-list="false"
                        :on-change="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        accept=".jpg, .jpeg, .png"
                    >
                        <img
                        v-if="ruleForm.employee_photo"
                        :src="imgPath + ruleForm.employee_photo"
                        class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
       </div>    
    </el-row>
</template>

<script>
export default {
    name:'Administrator',
    data() {
    return {
        fileList: [{name: '', url: ''}],
        ruleForm: {
        admin_account: '',
        admin_pwd: '',
        admin_name: '',
        admin_depart: '',
        role_id: '',
        admin_phone: '',
        self_description: '',
        imgPath:"",
        employee_repwd: "",
        loc: "", //三级级联地址
        contentFile: "", //清空content图片路径
        allPosition: [],
        deptSelect: [],
        ruleForm: {},
        ruleFormData: {},
        //  选择地址
        options: regionData,
        selectedOptions: [],
        },
      };
    },
    methods: {
        pushPermissions(){
           this.$router.push({
               name:'权限设置',
               path:'/Home/Homemin/Permissions',
               query: {

                    },
          })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
           this.imgPath = "";
            this.$refs.staffHeadImg.clearFiles();
            const isJPG = file.type === "image/jpeg" || file.type === "image/png"; //判断图片的格式
            const is50kb = file.size / 1024 / 1024 <= 50; //判断上传图片的大小是否小于50kb
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 或者 PNG格式!");
                return false;
            } else if (!is50kb) {
                this.$message.error("上传头像图片大小不能超过 50kb!");
                return false;
            } else {
                this.ruleForm.employee_photo = URL.createObjectURL(file);       
            }
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        uploadImgAndData(content) {
        this.ruleFormData.append("multipartFile", content.file);
        this.imgPath = "";
        },
    },
    created(){
        this.employeeId = this.$route.params.curStaff.employee_id;
        this.ruleForm = this.$route.params.curStaff;
        this.ruleFormData = new FormData();
        // console.log(this.ruleForm);

        this.employee_repwd = this.$route.params.curStaff.employee_pwd;
        this.ruleForm.employee_birth = new Date(
        this.$route.params.curStaff.employee_birth
        );
        this.ruleForm.employee_hiredate = new Date(
        this.$route.params.curStaff.employee_hiredate
        );
    }
}
</script>

<style lang='less' scoped>
.zhanghao{
    padding: 2% 52% 2% 20%;
}

</style>